<script lang="ts">
	import { goto } from '$app/navigation';

	// 组件分类数据
	const componentCategories = [
		{
			id: 'basic',
			name: '基础组件',
			icon: '📦',
			description: '提供最基础的UI元素和交互能力',
			components: [
				{ name: 'Button', description: '按钮组件，支持多种样式和状态' },
				{ name: 'Input', description: '输入框组件，支持多种输入类型' },
				{ name: 'Select', description: '选择器组件，支持单选和多选' },
				{ name: 'Checkbox', description: '复选框组件' },
				{ name: 'Radio', description: '单选框组件' },
				{ name: 'Switch', description: '开关组件' },
				{ name: 'Popover', description: '弹出层组件' },
				{ name: 'Tooltip', description: '提示框组件' },
			]
		},
		{
			id: 'data',
			name: '数据展示',
			icon: '📊',
			description: '用于数据的展示、筛选和交互',
			components: [
				{ name: 'Table', description: '表格组件，支持排序、筛选、分页等' },
				{ name: 'List', description: '列表组件' },
				{ name: 'Card', description: '卡片组件' },
				{ name: 'Statistic', description: '统计数值组件' },
			]
		},
		{
			id: 'layout',
			name: '布局组件',
			icon: '🧱',
			description: '用于页面布局和结构组织',
			components: [
				{ name: 'Layout', description: '基础布局组件' },
				{ name: 'Grid', description: '栅格系统' },
				{ name: 'Space', description: '间距组件' },
			]
		},
		{
			id: 'feedback',
			name: '反馈组件',
			icon: '💬',
			description: '提供用户交互反馈',
			components: [
				{ name: 'Modal', description: '模态框组件' },
				{ name: 'Drawer', description: '抽屉组件' },
				{ name: 'Message', description: '消息提示组件' },
				{ name: 'Notification', description: '通知组件' },
				{ name: 'Loading', description: '加载状态组件' },
			]
		},
		{
			id: 'form',
			name: '表单组件',
			icon: '📝',
			description: '用于数据收集和表单验证',
			components: [
				{ name: 'Form', description: '表单容器组件' },
				{ name: 'FormItem', description: '表单项组件' },
				{ name: 'DatePicker', description: '日期选择器' },
				{ name: 'Upload', description: '上传组件' },
			]
		}
	];

	// 组件使用统计（模拟数据）
	const usageStats = {
		totalComponents: 30,
		basicComponents: 12,
		dataComponents: 8,
		layoutComponents: 4,
		feedbackComponents: 6,
		formComponents: 10
	};

	// 处理组件点击
	const handleComponentClick = (componentName: string) => {
		goto(`/component/${componentName.toLowerCase()}`);
	};

	// 处理分类点击
	const handleCategoryClick = (categoryId: string) => {
		const categoryElement = document.getElementById(`category-${categoryId}`);
		if (categoryElement) {
			categoryElement.scrollIntoView({ behavior: 'smooth' });
		}
	};

	// SEO相关
	$: title = '组件总览 | Dhzy UI';
</script>

<div class="component-overview-container">
	<!-- 页面头部 -->
	<header class="overview-header">
		<h1 class="overview-title">东海 UI 组件库</h1>
		<p class="overview-description">
			企业级前端UI组件库，基于Svelte 5 + SvelteKit开发，提供丰富的组件和完善的文档
		</p>
		
		<!-- 组件统计信息 -->
		<div class="stats-grid">
			<div class="stat-card">
				<div class="stat-number">{usageStats.totalComponents}</div>
				<div class="stat-label">总组件数</div>
			</div>
			<div class="stat-card">
				<div class="stat-number">{usageStats.basicComponents}</div>
				<div class="stat-label">基础组件</div>
			</div>
			<div class="stat-card">
				<div class="stat-number">{usageStats.dataComponents}</div>
				<div class="stat-label">数据展示</div>
			</div>
			<div class="stat-card">
				<div class="stat-number">{usageStats.formComponents}</div>
				<div class="stat-label">表单组件</div>
			</div>
		</div>
	</header>

	<!-- 导航栏 -->
	<nav class="overview-nav">
		<div class="nav-title">组件分类导航</div>
		<div class="nav-categories">
			{#each componentCategories as category}
				<button 
					class="nav-category-button"
					on:click={() => handleCategoryClick(category.id)}
				>
					<span class="category-icon">{category.icon}</span>
					<span class="category-name">{category.name}</span>
				</button>
			{/each}
		</div>
	</nav>

	<!-- 组件分类展示 -->
	<main class="components-main">
		{#each componentCategories as category}
			<section id={`category-${category.id}`} class="category-section">
				<div class="category-header">
					<span class="category-icon-large">{category.icon}</span>
					<div class="category-info">
						<h2 class="category-title">{category.name}</h2>
						<p class="category-description">{category.description}</p>
					</div>
				</div>
				
				<div class="components-grid">
					{#each category.components as component}
						<div 
							class="component-card"
							on:click={() => handleComponentClick(component.name)}
							role="button"
							tabindex="0"
							on:keydown={(e) => {
								if (e.key === 'Enter' || e.key === ' ') {
									handleComponentClick(component.name);
								}
							}}
						>
							<h3 class="component-name">{component.name}</h3>
							<p class="component-description">{component.description}</p>
							<div class="component-action">
								<span class="action-text">查看详情</span>
								<span class="action-arrow">→</span>
							</div>
						</div>
					{/each}
				</div>
			</section>
		{/each}
	</main>

	<!-- 底部信息 -->
	<footer class="overview-footer">
		<div class="footer-content">
			<p>东海 UI 组件库 © {new Date().getFullYear()}</p>
			<p>基于 Svelte 5 + SvelteKit 构建</p>
		</div>
	</footer>
</div>

<style lang="scss">
	.component-overview-container {
        width: 100%;
        height: round(calc(100% - 40px), 1px);
        color: var(--color-info-700);
	}

	// 头部样式
	.overview-header {
		padding: 2rem 1.5rem;
		text-align: center;
		background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-400) 100%);
        border-radius: var(--border-radius);
        color: white;	
		margin-bottom: 2rem;

		.overview-title {
			font-size: 2.5rem;
			font-weight: 700;
			margin: 0 0 0.5rem 0;
		}

		.overview-description {
			font-size: 1.1rem;
			margin-bottom: 2rem;
			opacity: 0.9;
		}

		.stats-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
			gap: 1rem;
			max-width: 800px;
			margin: 0 auto;

			.stat-card {
				background: rgba(255, 255, 255, 0.2);
				backdrop-filter: blur(8px);
				border-radius: var(--border-radius);
				padding: 1rem;
				transition: transform 0.2s ease;

				&:hover {
					transform: translateY(-2px);
				}

				.stat-number {
					font-size: 1.8rem;
					font-weight: 700;
					margin-bottom: 0.25rem;
				}

				.stat-label {
					font-size: 0.9rem;
					opacity: 0.9;
				}
			}
		}
	}

	// 导航样式
	.overview-nav {
		max-width: 1200px;
		margin: 0 auto 2rem;
		padding: 0 1.5rem;

		.nav-title {
			font-size: 1.25rem;
			font-weight: 600;
			margin-bottom: 1rem;
		}

		.nav-categories {
			display: flex;
			flex-wrap: wrap;
			gap: 0.75rem;

			.nav-category-button {
				display: flex;
				align-items: center;
				gap: 0.5rem;
				padding: 0.75rem 1rem;
				background: var(--color-background-secondary);
				border: 1px solid var(--color-border);
				border-radius: var(--border-radius);
				cursor: pointer;
				transition: all 0.2s ease;
				font-size: 0.95rem;

				&:hover {
					background: var(--color-primary-light);
					border-color: var(--color-primary);
					color: var(--color-primary);
				}

				.category-icon {
					font-size: 1.2rem;
				}
			}
		}
	}

	// 主内容样式
	.components-main {
		max-width: 1200px;
		margin: 0 auto 3rem;
		padding: 0 1.5rem;

		.category-section {
			margin-bottom: 3rem;

			.category-header {
				display: flex;
				align-items: center;
				gap: 1rem;
				margin-bottom: 1.5rem;

				.category-icon-large {
					font-size: 2rem;
				}

				.category-info {
					.category-title {
						font-size: 1.75rem;
						font-weight: 600;
						margin: 0 0 0.25rem 0;
					}

					.category-description {
						color: var(--color-text-secondary);
						margin: 0;
						font-size: 1rem;
					}
				}
			}

			.components-grid {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
				gap: 1.25rem;

				.component-card {
					background: var(--color-background-secondary);
					border: 1px solid var(--color-border);
					border-radius: var(--border-radius);
					padding: 1.5rem;
					cursor: pointer;
					transition: all 0.2s ease;

					&:hover {
						transform: translateY(-2px);
						box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
						border-color: var(--color-primary);
					}

					.component-name {
						font-size: 1.25rem;
						font-weight: 600;
						margin: 0 0 0.5rem 0;
						color: var(--color-text-primary);
					}

					.component-description {
						color: var(--color-text-secondary);
						margin: 0 0 1rem 0;
						font-size: 0.95rem;
						line-height: 1.5;
					}

					.component-action {
						display: flex;
						align-items: center;
						gap: 0.5rem;
						color: var(--color-primary);
						font-size: 0.9rem;

						.action-arrow {
							transition: transform 0.2s ease;
						}

						&:hover .action-arrow {
							transform: translateX(3px);
						}
					}
				}
			}
		}
	}

	// 底部样式
	.overview-footer {
		background: var(--color-background-secondary);
		padding: 2rem 1.5rem;
		text-align: center;
		border-top: 1px solid var(--color-border);

		.footer-content {
			p {
				margin: 0.25rem 0;
				color: var(--color-text-secondary);
				font-size: 0.9rem;
			}
		}
	}

	// 响应式设计
	@media (max-width: 768px) {
		.overview-header {
			padding: 1.5rem 1rem;

			.overview-title {
				font-size: 2rem;
			}

			.overview-description {
				font-size: 1rem;
			}

			.stats-grid {
				grid-template-columns: repeat(2, 1fr);

				.stat-card {
					.stat-number {
						font-size: 1.5rem;
					}
				}
			}
		}

		.nav-categories {
			.nav-category-button {
				padding: 0.6rem 0.8rem;
				font-size: 0.9rem;
			}
		}

		.components-main {
			.category-section {
				.category-header {
					.category-title {
						font-size: 1.5rem;
					}
				}

				.components-grid {
					grid-template-columns: 1fr;
				}
			}
		}
	}
</style>